<template>
    <div>
        <!--动态显示用户名-->
        <el-row style="margin-bottom: 30px">
            <h1>欢迎您，{{user.nickname}}</h1>
        </el-row>
        <!--如果角色是ROLE_USER则不显示-->
        <el-row v-if="user.role != 'ROLE_USER'" style="margin-bottom: 30px">
            <el-col :span="6">
                <el-card style="color: black">
                    <div><i class="el-icon-user-solid"/>已有用户数量</div>
                    <div style="padding: 10px 0; text-align: center; font-weight: bold">
                        {{this.userAmount}}
                    </div>
                </el-card>
            </el-col>
            <el-col :span="6">
                <el-card style="color: black">
                    <div><i class="el-icon-user-solid"/>本月新注册用户数量</div>
                    <div style="padding: 10px 0; text-align: center; font-weight: bold">
                        {{this.newUserAmount}}
                    </div>
                </el-card>
            </el-col>
            <el-col :span="6">
                <el-card style="color: black">
                    <div><i class="el-icon-s-order"/>本月集卡订单数量</div>
                    <div style="padding: 10px 0; text-align: center; font-weight: bold">
                        {{this.orderAmount}}
                    </div>
                </el-card>
            </el-col>
            <el-col :span="6">
                <el-card style="color: black">
                    <div><i class="el-icon-s-order"/>本月已完成订单数量</div>
                    <div style="padding: 10px 0; text-align: center; font-weight: bold">
                        {{this.finishedOrderAmount}}
                    </div>
                </el-card>
            </el-col>
        </el-row>
        <el-row>
            <div class="block">
                <el-date-picker
                        v-model="date"
                        type="date"
                        placeholder="查询某日集卡流量"
                        @change="load">
                </el-date-picker>
            </div>
        </el-row>

        <!--一些额外的配置可以打开这个注释-->
        <!--<el-row :gutter="10" style="margin-bottom: 40px">-->
            <!--<el-col :span="6">-->
            <!--<el-card style="color: black">-->
            <!--<div><i class="el-icon-user-solid" />faf考试成绩</div>-->
            <!--<div style="padding: 10px 0; text-align: center; font-weight: bold">-->
            <!--100-->
            <!--</div>-->
            <!--</el-card>-->
            <!--</el-col>-->
            <!--<el-col :span="6">-->
            <!--<el-card style="color: black">-->
            <!--<div><i class="el-icon-user-solid" />jyf考试成绩</div>-->
            <!--<div style="padding: 10px 0; text-align: center; font-weight: bold">-->
            <!--100-->
            <!--</div>-->
            <!--</el-card>-->
            <!--</el-col>-->
            <!--<el-col :span="6">-->
            <!--<el-card style="color: black">-->
            <!--<div><i class="el-icon-user-solid" />wj考试成绩</div>-->
            <!--<div style="padding: 10px 0; text-align: center; font-weight: bold">-->
            <!--0-->
            <!--</div>-->
            <!--</el-card>-->
            <!--</el-col>-->
        <!--</el-row>-->

        <!--Echarts图表-->
        <el-row>
            <el-col :span="24">
                <div id="main" style="width: 1350px; height: 400px"></div>
            </el-col>
        </el-row>
    </div>
</template>

<script>
    import * as echarts from 'echarts'

    export default {
        name: "Home",
        data() {
            return {
                user: localStorage.getItem("user") ? JSON.parse(localStorage.getItem("user")) : {},
                date: new Date(),
                afterFormatDate: "2022-05-25",
                userAmount: "",
                newUserAmount: "",
                orderAmount: "",
                finishedOrderAmount: ""
            }
        },
        created() {
            this.request.get("/user/user").then(res => {
                this.userAmount = res.data
            })
            this.request.get("/user/newUser").then(res => {
                this.newUserAmount = res.data
            })
            this.request.get("/admin/order/order").then(res => {
                this.orderAmount = res.data
            })
            this.request.get("/admin/order/finishedOrder").then(res => {
                this.finishedOrderAmount = res.data
            })
        },
        // 页面元素渲染之后触发
        mounted() {
            this.load()
        },
        methods: {
            load() {
                // 日期格式的调整
                this.afterFormatDate = this.date.Format('yyyy-MM-dd')
                var option = {
                    title: {
                        text: this.afterFormatDate + '日集卡流量统计',
                        // subtext: '趋势图',
                        left: 'center'
                    },
                    tooltip: {
                        trigger: 'item'
                    },
                    legend: {
                        orient: 'vertical',
                        left: 'left'
                    },
                    xAxis: {
                        type: 'category',
                        data: ["0:00-1:00", "1:00-2:00", "2:00-3:00", "3:00-4:00",
                            "4:00-5:00", "5:00-6:00", "6:00-7:00", "7:00-8:00",
                            "8:00-9:00", "9:00-10:00", "10:00-11:00", "11:00-12:00",
                            "12:00-13:00", "13:00-14:00", "14:00-15:00", "15:00-16:00",
                            "16:00-17:00", "17:00-18:00", "18:00-19:00", "19:00-20:00",
                            "20:00-21:00", "21:00-22:00", "22:00-23:00", "23:00-24:00",]
                    },
                    yAxis: {
                        type: 'value',
                        // 图上的间隔是动态的，这里min和max都是1的话相当于设置间隔为1，再加上min和max值的设置相当于静态图
                        minInterval: 1,
                        maxInterval: 1,
                        min: 0,
                        max: 15,
                    },
                    // label: {
                    //     show: true,
                    //     position: 'top',
                    // },
                    series: [
                        {
                            name: "该时间窗集卡数量",
                            data: [],
                            type: 'bar',
                            // markLine用于设置警戒线
                            markLine: {
                                // data用于设置警戒线
                                data:[{
                                    yAxis: 10,
                                    name: "警戒线"
                                }],
                                // 标签/说明
                                label:{
                                    normal: {
                                        show: true,
                                        formatter: "警戒线"
                                    },
                                },
                                // 警戒线样式
                                lineStyle:{
                                    color: 'red',
                                    // 实线
                                    type: "solid"
                                },
                            }
                        },
                    ]
                };

                var chartDom = document.getElementById('main');
                var myChart = echarts.init(chartDom);
                option.series[0].data = [1, 2, 3, 4]
                // 数据准备完毕之后再set
                myChart.setOption(option);

                this.request.get("/echarts/flow", {
                    params: {
                        date: this.afterFormatDate
                    }
                }).then(res => {
                    // 填空
                    option.series[0].data = res.data;
                    // 数据准备完毕之后再set
                    myChart.setOption(option);

                })
            }
        }
    }
</script>
<style scoped>

</style>